<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="pie" style="width: 1000px; height: 800px"></div>
    <div style="height: 50px"></div>
    <div id="line" style="width: 1000px; height: 800px"></div>

    <div style="height: 50px"></div>
    <div id="bar" style="width: 1000px; height: 800px"></div>

	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
	<script>
       const option = {
           title: {
               text: '饼图示例',
               subtext: '纯属虚构',
               left: 'left'
           },
            legend: {
                top: 'top'
            },
           tooltip: {
               trigger: 'item'
           },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [

                    ]
                }
            ]
        };

       lineOption = {
           title: {
               text: '折线图堆叠'
           },
           legend: {
               top: 'top'
           },
           tooltip: {
               trigger: 'axis'
           },
           xAxis: {
               type: 'category',
               data: []
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               name: '11',
               data: [],
               type: 'line'
           },
               {
                   name: '22',
                   data: [111,222,333,444,0],
                   type: 'line'
               }
           ]
       };

       barOption = {
           title: {
               text: '柱状图'
           },
           legend: {
               top: 'top'
           },
           tooltip: {
               trigger: 'axis'
           },
           xAxis: {
               type: 'category',
               data: []
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               name: '11',
               data: [],
               type: 'bar'
           },
               {
                   name: '22',
                   data: [111,222,333,444,0],
                   type: 'bar'
               }
           ]
       };

       var chartDom = document.getElementById('pie');
       var myChart = echarts.init(chartDom);

       var lineDom = document.getElementById('line');
       var lineChart = echarts.init(lineDom);

       var barDom = document.getElementById('bar');
       var barChart = echarts.init(barDom);


       fetch("/echarts").then(response => response.json()).then(res => {
           // 折线图
           const date = res.map(v => v.date);
           console.log(date)
           lineOption.xAxis.data = date

           const count = res.map(v => v.count);
           console.log(count)
           lineOption.series[0].data = count
           //lineChart.setOption(lineOption)


           // 柱状图
           console.log(date)
           barOption.xAxis.data = date

           console.log(count)
           barOption.series[0].data = count
           //barChart.setOption(barOption)


           // 饼图
           res.forEach(item => {
               option.series[0].data.push({name: item.name, value: item.count})
           })
           console.log(option)

           myChart.setOption(option);



       })





    </script>
</body>
</html>
